<template>
  <ViewState
    v-if="!store.getters.userinfo"
    Type="error"
    ErrorText="登录查看收藏"
    IsShowBottom
    ButtonText="登录"
    @ClickTheButton="loginVisible = true"
  />
  <ViewState v-else-if="load" LoadText="正在加载，请稍后..." />
  <ViewState v-else-if="empty" Type="empty" ErrorText="暂无收藏的数据" />
  <ViewState
    v-else-if="error"
    @ClickTheButton="init"
    Type="error"
    ErrorText="加载错误，请重试"
    IsShowBottom
    ButtonText="重新加载"
  />

  <div v-else class="body">
    <div :class="seeIndex !== -1 ? 'containerOpen' : ''" class="container">
      <el-scrollbar height="100%" class="leftContent">
        <div v-for="(item, index) in list" :key="index" class="item">
          <div class="name">{{ item.issue }}</div>
          <div class="time">收藏于{{ conversionTime(item.createdTime) }}</div>
          <div v-if="!item.isError" class="operation">
            <div
              @click="seeIndex = index"
              class="operationItem operationItemSelected"
            >
              <el-icon size="14">
                <Promotion />
              </el-icon>
              <div class="operationExplain">查看</div>
            </div>
            <div
              @click="cancelCollection(item.starId, index)"
              class="operationItem"
              :class="item.isCollection ? 'operationItemSelected' : ''"
            >
              <el-icon size="14">
                <Star />
              </el-icon>
              <div class="operationExplain">取消收藏</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar v-if="seeIndex !== -1" height="100%" class="rightContent">
        <div class="title">{{ list[seeIndex].issue }}</div>
        <div class="desc">
          <v-md-editor
            :model-value="list[seeIndex].answer"
            mode="preview"
            @copy-code-success="handleCopyCodeSuccess"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
  <LoginDialog
    :show="loginVisible"
    @close="loginVisible = false"
    @loginSucceeded="init"
  />
</template>

<script>
import ViewState from "@/components/ViewState.vue";
import { onMounted, ref } from "vue";
import { Favorites, FavoritesDel } from "../../api/BSideApi";
import { Promotion, Star } from "@element-plus/icons-vue";
import { ElMessageBox, ElNotification } from "element-plus";
import LoginDialog from "@/components/LoginDialog.vue";
import store from "@/store";
import { conversionTime } from "@/utils/date";

export default {
  name: "CollectionView",
  methods: { conversionTime },
  computed: {
    store() {
      return store;
    },
  },
  components: { LoginDialog, Star, Promotion, ViewState },
  setup() {
    let load = ref(false);
    let empty = ref(false);
    let error = ref(false);
    let list = ref([]);
    let seeIndex = ref(-1);
    let loginVisible = ref(false);

    onMounted(() => {
      if (store.getters.userinfo) init();
    });

    async function init() {
      try {
        load.value = true;
        let res = await Favorites();
        if (res.length) {
          list.value = res;
        } else {
          empty.value = true;
        }
        load.value = false;
        error.value = false;
      } catch (err) {
        load.value = false;
        error.value = true;
      }
    }

    async function cancelCollection(id, index) {
      try {
        await ElMessageBox({
          title: "提示",
          message: "取消收藏后数据将不可找回，是否确认取消该收藏",
          confirmButtonText: "取消收藏",
          cancelButtonText: "再想想",
          showCancelButton: true,
          type: "warning",
        });
        await FavoritesDel(id);
        list.value.splice(index, 1);
        if (seeIndex.value === index) seeIndex.value = -1;
      } catch (e) {
        console.log("取消收藏");
      }
    }

    // TODO 复制代码块
    function handleCopyCodeSuccess(code) {
      navigator.clipboard.writeText(code);
      ElNotification({
        message: "复制成功",
        type: "success",
      });
    }

    return {
      load,
      empty,
      error,
      init,
      list,
      cancelCollection,
      seeIndex,
      handleCopyCodeSuccess,
      loginVisible,
    };
  },
};
</script>

<style scoped>
.body {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 30px;
  display: flex;
  overflow: auto;
  background-color: var(--bgColor2);
}

@keyframes explainAnimation {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.container {
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  animation: explainAnimation 0.3s;
}

.containerOpen {
  max-width: 100%;
  display: flex;
  gap: 20px;
}

.leftContent {
  flex: 1;
}

.rightContent {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  background: var(--bgColor1);
  border-radius: 8px;
  padding: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: var(--textColor1);
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}

.desc {
  margin-top: 20px;
}

.item {
  box-sizing: border-box;
  background: var(--bgColor1);
  border-radius: 8px;
  flex-direction: column;
  margin-top: 26px;
  padding: 20px;
  display: flex;
  letter-spacing: 1px;
  width: 100%;
}

.item:first-child {
  margin-top: 0;
}

.item:last-child {
  /*margin-bottom: 20px;*/
}

.name {
  font-size: 16px;
  line-height: 28px;
  color: var(--textColor1);
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}

.time {
  margin-top: 5px;
  font-size: 12px;
  color: var(--textColor4);
}

.operation {
  display: flex;
  margin-top: 20px;
}

.operationItem {
  height: 30px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 15px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  background-color: var(--bgColor2);
  border-radius: 100px;
  font-size: 13px;
  color: var(--textColor1);
}

.operationItemSelected {
  background-color: var(--themeColor1);
  color: var(--themeTextColor);
}

.operationExplain {
  margin-left: 5px;
}

::v-deep(.vuepress-markdown-body) {
  padding: 0 0 0 16px;
  color: var(--textColor1);
  background-color: var(--bgColor1);
}
</style>
